<template>
  <div>
    <h2>computed</h2>
    <div>{{ message }}</div>
    <div>{{ reverseMessage }}</div>
    <h2>watch</h2>
    <div>{{ firstName }}</div>
    <div>{{ fullName }}</div>
  </div>
</template>

<script>
export default {
  // 计算属性响应式依赖缓存
  computed: {
    // 计算属性 getter
    reverseMessage () {
      return this.message.split('').reverse().join('')
    }
  },
  data() {
    return {
      message: '123456',
      firstName: 'han',
      fullName: ''
    }
  },
  watch: {
    firstName (val) {
      this.fullName = val + 'qiang'
    }
  }
 }
</script>

<style lang="less" scoped>
</style>